<template>
    <div class="app-container" v-loading="loadings" element-loading-text="二维码正在生成...">
        <p class="color nav-p center">
            充值金额：￥
            <span class="red fontSize16">{{form.amount}}</span>
        </p>
        <div v-if="flag">
            <div class="code-img" id="qrcode" ref="qrcode"></div>
        </div>
        <div v-else>
            <div class="code-img" id="qrcode" ref="qrcode"></div>
            <img @click="refreshFn" class="code-img code-img-child" :src="codeImg" alt="">
        </div>
        <p class="color center title-p">请使用{{form.radio | payWay}}扫码完成支付</p>
        <p class="color center title-p fontSize12">二维码将在{{times}}秒后失效</p>
        <el-button class="btn" type="primary" @click="refreshFn">请单击刷新</el-button>
    </div>
</template>
<script>
import changeMoney from "@/api/changeMoney";
import QRCode from "qrcodejs2";
var timer
export default {
    name: "codePay",
    data() {
        return {
            flag:true,
            loadings:true,
            form: {
                amount: null,
                radio: null
            },
            times:300,
            // 订单号
            id:null,
            codeImg:require("../../../static/img/qrcode.jpg")
        };
    },
    filters:{
        payWay(e){
            switch(e){
                case "WX":
                    return "微信"
                case "AL":
                    return "支付宝"
                case "YL":
                    return "银联"
            }
        }
    },
    inject:["reload"],
    mounted() {
        this.form = JSON.parse(this.$route.query.userId);
        this.getReCharge()
        this.timeFn()
    },
    // 页面销毁时
    destroyed(){
        clearInterval(timer)
    },
    methods: {
        // 充值下单接口调用
        getReCharge() {
            changeMoney
                .recharge({
                    targetId: String(this.$store.state.user.hospitalId),
                    amount:this.form.amount,
                    payType: this.form.radio
                })
                .then(res => {
                    this.loadings = false
                    this.id = res.data.data.orderId
                    this.$nextTick(() => {
                        this.qrcode(res.data.data.paymentLink);
                        this.queryPayStatus()
                    });
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.loadings = false
                });
        },
        // 轮询充值状态
        queryPayStatus(){
            timer = setInterval(() =>{
                changeMoney
                    .queryPayStatus({
                        id:this.id
                    })
                    .then(res => {
                        if (!res.data.code) {
                            let rdds = res.data.data.status
                            if(rdds!=0){
                                if(rdds==1){
                                    this.toRoutes("payResults",true)
                                }else{
                                    this.toRoutes("payResults",false)
                                }
                                clearInterval(timer)
                            }
                        } else {
                            this.$message({
                                showClose: true,
                                message:"接口访问失败",
                                type: "error"
                            });
                            clearInterval(timer)
                        }
                    })
                    .catch(err => {
                        this.errorStatus(err);
                    });
            },1000);
        },
        // 刷新
        refreshFn(){
            this.reload()
        },
        // 路由跳转
        toRoutes(e, status) {
            let route = {
                name: e,
                query: { status: JSON.stringify(status) }
            };
            this.$router.push(route);
        },
        // 倒计时
        timeFn(){
            let timers = setInterval(() =>{
                this.times--
                if(this.times==0){
                    clearInterval(timers)
                    // this.reload()
                    this.flag = false
                }
            },1000);
        },
        // 二维码生成
        qrcode(e) {
            let qrcode = new QRCode("qrcode", {
                width: 200, // 设置宽度，单位像素
                height: 200, // 设置高度，单位像素
                text:e // 设置二维码内容或跳转地址
            });
        }
    },
};
</script>
<style scoped lang="less">
.app-container {
    padding: 0.1px !important;
    .color {
        color: #606266;
    }
    .code-img {
        width: 188px;
        display: table;
        margin: 0 auto;
    }
}
.red {
    color: red;
}
.fontSize16 {
    font-size: 16px;
}
.center {
    text-align: center;
}
.nav-p {
    margin-top: 166px;
    margin-bottom: 20px;
}
.title-p {
    margin-top: 20px;
    margin-bottom: 20px;
}
.btn {
    display: table;
    margin: 0 auto;
    margin-top: 40px;
}
.fontSize12{font-size: 10px}
.code-img-child{margin-top: -200px!important;
    width: 200px!important;
    height: 200px;
    cursor: pointer;}
</style>